{include file="index/_meta" /}
    <title>店铺详情</title>
<style>
    .shop{
        background: #fff;
        margin-top: 10px;
    }
    .goodsInfo{
        background: #fff;
        padding: 10px;
    }
    .goodsInfo p,.shop p{
        margin: .3em 0;
    }
    .content{
        margin-top: 10px;
        background: #fff;
        padding: 10px;
    }
    .content img{
        width: 100%;
    }
</style>
</head>
<body>
    <div id="app">
    <van-nav-bar
            title="店铺详情"
            left-text="返回"
            left-arrow
            @click-left="window.history.back();"
    ></van-nav-bar>

    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">

        <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(image, index) in carousel" :key="index">
                <van-image height="150" :src="image" ></van-image>
            </van-swipe-item>
        </van-swipe>

        <div class="goodsInfo">
            <van-row>
                <van-col span="24"><p style="font-size: 1.2em;">{{info.name}}</p></van-col>
            </van-row>
            <van-row>
                <van-col span="12"><p style="color: red;">{{info.state_text}}</p></van-col>
            </van-row>
            <van-row>
                <van-col span="12"><a style="text-align: left;font-size: 12px;color: #bdbdbd;display: block;">营业时间：{{info.business_hours}}</a></van-col>
                <van-col span="12"><a :href="'tel:'+info.phone" style="text-align: right;font-size: 12px;display: block;color: #1E9FFF;">电话：{{info.phone}}</a></van-col>
            </van-row>
            <van-row>
                <van-col span="24"><p style="font-size: 12px;color: #bdbdbd;">地址：{{info.address}}</p></van-col>
            </van-row>
        </div>
        <div class="content">
            <h3 style="margin-top: 0;border-bottom: 1px solid #ddd;">商家介绍</h3>
            <div v-html="info.content"></div>
        </div>

        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" :url="'tel:'+info.phone"></van-goods-action-icon>
            <van-goods-action-button type="danger" text="去买单" @click="buy"></van-goods-action-button>
        </van-goods-action>


    </van-pull-refresh>


    <van-popup v-model="showPop"
               round
               closeable
               position="bottom"
               :style="{ height: '30%',background:'#eee' }">
        <div style="margin-top: 44px;padding: 10px">
            <van-field v-model="price" type="number" label="消费金额" placeholder="请咨询服务员"></van-field>
            <van-button round block type="warning" style="margin-top: 30px;" @click="onBuyClicked">买单</van-button>
        </div>
    </van-popup>
</div>
<script>
    new Vue({
        el: "#app",
        data(){return{
            shop_id: '{$Think.get.shop_id}',
            info: [],
            goods: [],
            carousel: [],
            isLoading:false,
            showPop:false,
            show:false,
            no:false,
            yes:true,
            price:'',
        }},
        created(){
            // 整个页面的背景色
            document.body.style.backgroundColor="#ddd";
            this.getDetail()
        },
        methods:{
            // 获取商品详情
            getDetail() {
                let that = this
                axios.post("{:url('shop/getShopDetail')}",{id:that.shop_id}).then(function (ret) {
                    that.info = ret.data.data
                    that.goods = ret.data.data.goods
                    that.carousel = ret.data.data.carousel

                    that.isLoading = false
                    that.share()
                }).catch(function () {
                    vant.Dialog.alert({
                        message: '当前店铺不存在或已下架，请点击返回首页重新选择店铺',
                        confirmButtonText:"返回首页"
                    }).then(() => {
                        window.location.href = "{:url('shop/index')}"
                    });
                })
            },
            // 上拉刷新
            onRefresh() {
                this.getDetail()
            },
            // 购买按钮
            buy() {
                this.showPop = true
            },
            // 立即购买
            onBuyClicked(){
                let info = this.info
                let that = this
                // 携带参数进入订单页面
                axios.post("{:url('order/createOrderShop')}",{price:that.price,shop_id:info.id}).then(function (ret) {
                    console.log(ret)
                    if (ret.data.code == 0){
                        let jssdk = ret.data.data.json
                        console.log(jssdk)
                        wx.chooseWXPay({
                            timestamp: jssdk.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                            nonceStr: jssdk.nonceStr, // 支付签名随机串，不长于 32 位
                            package: jssdk.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                            signType: jssdk.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                            paySign: jssdk.paySign, // 支付签名
                            success: function (res) {
                                // 支付成功后的回调函数
                                console.log(res)
                                that.showPop = false
                                vant.Notify({type:'success',message:'支付成功'})
                            }
                        });
                    }else{
                        vant.Notify({ type: 'danger', message: ret.msg });
                    }
                })
            },
            share(){
                let that = this
                wx.ready(function () {
                    let link = "{$url}?shop_id="+that.shop_id+"&share_id="+that.user_id
                    let title = that.info.name
                    let desc = '地址：'+that.info.address + ',电话：'+that.info.phone
                    let img_thumb = that.info.img_thumb
                    if (img_thumb == ''){
                        img_thumb = "{$domain}/static/wechat/img/qrcode_logo.jpg"
                    }
                    wx.updateAppMessageShareData({
                        title: title, // 分享标题
                        desc: desc, // 分享描述
                        link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: img_thumb, // 分享图标
                    })

                    wx.updateTimelineShareData({
                        title: title, // 分享标题
                        link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: img_thumb, // 分享图标
                    })

                    wx.onMenuShareWeibo({
                        title: title, // 分享标题
                        desc: desc, // 分享描述
                        link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: img_thumb, // 分享图标
                    });
                })
            },
        },
    })
</script>
</body>
</html>
